<template>
  <div>
    <keep-alive>
      <router-view class="home-content app-scroll-none"></router-view>
    </keep-alive>
    <van-tabbar
      @change="tabbarChange"
      v-model="active"
      active-color="#fa9c15"
      inactive-color="#dcdcdc"
      placeholder
    >
      <van-tabbar-item name="main">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? ic_report_check : ic_report" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="msg">
        <span>消息</span>
        <template #icon="props">
          <img :src="props.active ? ic_msg_check : ic_msg" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="other">
        <span>其他</span>
        <template #icon="props">
          <img :src="props.active ? ic_road_check : ic_road" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="mine">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? ic_mine_check : ic_mine" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import api from "@/api/api";
export default {
  data() {
    return {
      tabIndex: 0,
      active: "main",
      ic_msg_check: require("../../assets/images/bottom/ic_msg_check.png"),
      ic_msg: require("../../assets/images/bottom/ic_msg.png"),
      ic_road_check: require("../../assets/images/bottom/ic_road_check.png"),
      ic_road: require("../../assets/images/bottom/ic_road.png"),
      ic_report_check: require("../../assets/images/bottom/ic_report_check.png"),
      ic_report: require("../../assets/images/bottom/ic_report.png"),
      ic_mine_check: require("../../assets/images/bottom/ic_mine_check.png"),
      ic_mine: require("../../assets/images/bottom/ic_mine.png"),
    };
  },

  mounted() {
    api.jumpPage("Main");
  },

  beforeDestroy() {},

  methods: {
    onPullDownRefresh() {},

    tabbarChange(index) {
      if (index == "main") {
        api.jumpPage("Main");
      } else if (index == "msg") {
        api.jumpPage("Msg");
      } else if (index == "other") {
        api.jumpPage("Other");
      } else if (index == "mine") {
        api.jumpPage("Mine");
      }
      this.onPullDownRefresh();
    },
  },
};
</script>

<style scoped>
.home-content {
  padding-bottom: 1.1rem;
  /* position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 1.1rem;
  overflow-y: scroll; */
}

.home-bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.1rem;
  background-color: #eee;
  display: flex;
  flex-direction: row;
}

.home-bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.home-bottomimagebar {
  position: relative;
  width: 0.84rem;
  height: 0.66rem;
}

.home-bottomimage {
  position: absolute;
  left: 0.16rem;
  top: 0.07rem;
  width: 0.52rem;
  height: 0.52rem;
}

.home-bottomcount {
  position: absolute;
  right: 0;
  top: 0;
  min-width: 0.22rem;
  height: 0.22rem;
  line-height: 0.22rem;
  padding: 0.02rem;
  font-size: 0.14rem;
  text-align: center;
  color: #fff;
  background-color: #ff6269;
  border-radius: 50%;
}

.home-bottomtip {
  color: #333;
  font-size: 0.24rem;
}
</style>